<template>
    <div class="index opa0 trans5" :style="{'opacity':mainshow}">
        <!--banner-->
        <div class="w100p h450 index_banner media_h24vw" v-if="banners">
            <el-carousel trigger="click" :autoplay="false" class="h100p">
                <el-carousel-item v-for="(item,k) in banners" :key="k">
                    <a  class="w100p h100p disblock" target="_blank" :href="item.slide_url" :title="item.slide_name"><!---->
                        <img :src="item.slide_pic" alt=" " class="w100p h100p disblock ">
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="_container_">
            <div class="index_inform mt20 w100p box_shadow_04 bgfff" v-if="tips">
                <div class="w100p pr30 fs14 postionre pl110">
                    <img src="./../assets/img/zx.png" alt="" class="w85 h35 disblock mt12 fl postionab left10">
                    <marquee class="lh56 " scrollamount=5 onmouseover="this.stop()" onmouseout="this.start()">
                        <span v-for="(v,k) in tips" :key="k" v-html="v.post_title" class="pr30"></span>
                    </marquee>
                </div>
            </div>
            <!--main-->
            <div class="pt20">
                <!--新闻直播-->
                <div class="w100p media_w100p">
                    <News :datas="news" @changerouter="changerouter" @refresh="refresh"></News>
                </div>
            </div>
            <div class="disflex jusbet pt20">
                <!--left-->
                <div class="w66_25p media_w100p">

                    <!--交易商品-->
                    <div class="w100p box_shadow_04  bgfff pb20  media_mb20 minh280">
                        <Column  class="w100p titlepr33"
                                 :datas="trade_type"
                                 :bannerUrl="trade_type_url"
                                 :size="'small'" :isbanner="true" :istags="true"
                                 :activetagid="active_trade_type"
                                 :pb="'pb22'"
                                 @changerouter="changerouter"
                                 @colomnTagsTap="tradeTypeChange"
                                 :infotext="''"
                        ></Column>
                    </div>
                    <!--交易所动态-->
                    <div class="w100p box_shadow_04 bgfff pb20 media_mb20 mt16 minh280">
                        <Column  class="w100p titlepr38"
                                 :datas="trading_dynamic" :size="'small'" :isbanner="true"
                                 :pb="'pb22'"
                                 :bannerUrl="trading_dynamic_url"
                                 @changerouter="changerouter"
                                 :infotext="''"
                        ></Column>
                    </div>
                    <!--商友会-->
                    <div class="w100p bgfff box_shadow_04 media_mb20 mt16 minh400">
                        <Column  class="w100p titlepr38 timer36 tablelh50"
                                 :datas="chamber_of_commerce" :size="'small'"
                                 :pb="'pb30'"
                                 @changerouter="changerouter"
                                 :infotext="' --- 营商会友，一切尽在商友会！'"
                        ></Column>
                    </div>
                </div>
                <!--right-->
                <div class="w32_9 media_w100p">
                    <!--交易所公告-->
                    <Column  class="w100p box_shadow_04 minh280 pb20"
                             :datas="exchange_notice"
                             :size="'big'"
                             :isbanner="false"
                             @changerouter="changerouter"
                             :infotext="''"
                    ></Column>
                    <!--分析师专栏-->
                    <Column  class="w100p mt16 minh280 pb20"
                             :datas="analyst"
                             :size="'small'"
                             @changerouter="changerouter"
                             :infotext="''"
                    ></Column>
                    <!--意见-->
                    <!--<Idea class="w100p media_w100p mt16"></Idea>-->
                    <!--登录-->
                    <Login class="w100p mt16" @tologin="tologin"></Login>
                </div>
            </div>

            <div class="w100p bgfff box_shadow_04 pl31 pr32 mt16 pb30">
                <p class="fs20 c333 pt25 pb23">合作伙伴</p>
                <div class="clearfix pb23">
                    <a :href="v.link_url"
                       :title="v.link_name"
                       class="disblock h82 fl mr1p mb10 media_w50p media_mr0"
                       v-for="(v,k) in partner"
                       target="_blank">
                        <img :src="v.link_image || '' " alt=" " class="h100p disblock mauto" >
                    </a>
                </div>
            </div>
        </div>
        <!--right-->
        <div class="right_fix scale_ercode media_disnone">
            <div class="wx curpointer postionre pt10 hoverbgdeepred" v-for="(v,k) in zhaoshang" :key="k" :title="'招商咨询：' +v">
                <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+v+'&site=qq&menu=yes'" class="postionab w100p h100p left0 top0 "  target="_blank"></a>
                <span class="iconfont icon-qq fs30 cfff disblock"></span>
                招商咨询{{k+1}}
                <!--<img :src="v" alt="" class="w128 h128 postionab ercode">-->
            </div>
            <div class="wb pt10 curpointer postionre hoverbgdeepred" v-for="(v,k) in jishu" :key="k" :title="'技术咨询：' +v">
                <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+v+'&site=qq&menu=yes'" class="postionab w100p h100p left0 top0 "  target="_blank"></a>
                <span class="iconfont icon-qq fs30 cfff disblock"></span>
                技术咨询{{k+1}}
                <!--<img :src="v" alt="" class="w128 h128 postionab ercode">-->
            </div>
        </div>
        <div class="right_fix scale_ercode disnone media_disblock">
            <div class="wx postionre pt10" v-for="(v,k) in zhaoshang" :key="k">
                <a :href="'mqqwpa://im/chat?chat_type=wpa&uin='+v+'&version=1&src_type=web&web_src=lvlingseeds.com'"
                   class="postionab w100p h100p left0 top0 "
                   target="_blank"></a>
                <span class="iconfont icon-qq fs30 cfff disblock"></span>
                招商咨询{{k+1}}
                <!--<img :src="v" alt="" class="w128 h128 postionab ercode">-->
            </div>
            <div class="wb pt10 postionre" v-for="(v,k) in jishu" :key="k">
                <a :href="'mqqwpa://im/chat?chat_type=wpa&uin='+v+'&version=1&src_type=web&web_src=lvlingseeds.com'"
                   class="postionab w100p h100p left0 top0 "
                   target="_blank"></a>
                <span class="iconfont icon-qq fs30 cfff disblock"></span>
                技术咨询{{k+1}}
                <!--<img :src="v" alt="" class="w128 h128 postionab ercode">-->
            </div>
        </div>

    </div>
    <!--<div class="index opa0 trans5" :style="{'opacity':mainshow}">
        &lt;!&ndash;banner&ndash;&gt;
        <div class="w100p h450 index_banner media_h24vw" v-if="banners">
            <el-carousel trigger="click" :autoplay="false" class="h100p">
                <el-carousel-item v-for="(item,k) in banners" :key="k">
                    <a  class="w100p h100p disblock" target="_blank" :href="item.slide_url" :title="item.slide_name">&lt;!&ndash;&ndash;&gt;
                        <img :src="item.slide_pic" alt=" " class="w100p h100p disblock ">
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="_container_">
            <div class="index_inform mt20 w100p box_shadow_04 bgfff" v-if="tips">
                <div class="w100p pr30 fs14 postionre pl110">
                    <img src="./../assets/img/zx.png" alt="" class="w85 h35 disblock mt12 fl postionab left10">
                    <marquee class="lh56 " scrollamount=5 onmouseover="this.stop()" onmouseout="this.start()">
                        <span v-for="(v,k) in tips" :key="k" v-html="v.post_title" class="pr30"></span>
                    </marquee>
                </div>
            </div>
            &lt;!&ndash;main&ndash;&gt;
            &lt;!&ndash;第一栏&ndash;&gt;
            <div class="w100p mt20 disflex jusbet index_main">
                <div class="w66_25p media_w100p">
                    <News :datas="news" @changerouter="changerouter" @refresh="refresh"></News>
                </div>
                <Column  class="w32_9 box_shadow_04 media_w100p"
                         :datas="exchange_notice"
                         :size="'big'"
                         :isbanner="false"
                         @changerouter="changerouter"
                         :infotext="''"
                ></Column>
            </div>
            &lt;!&ndash;第二栏&ndash;&gt;
            <div class="w100p mt16 disflex jusbet index_main">
                <div class="w66_25p box_shadow_04  bgfff pb20 media_w100p media_mb20">
                    <Column  class="w100p titlepr33"
                             :datas="trade_type"
                             :bannerUrl="trade_type_url"
                             :size="'small'" :isbanner="true" :istags="true"
                             :activetagid="active_trade_type"
                             :pb="'pb22'"
                             @changerouter="changerouter"
                             @colomnTagsTap="tradeTypeChange"
                             :infotext="''"
                    ></Column>
                </div>
                <Column  class="w32_9 media_w100p"
                         :datas="analyst"
                         :size="'small'"
                         @changerouter="changerouter"
                         :infotext="''"
                ></Column>
            </div>
            &lt;!&ndash;第三栏&ndash;&gt;
            <div class="w100p mt16 disflex jusbet index_main">
                <div class="w66_25p box_shadow_04 bgfff pb20 media_w100p media_mb20">
                    <Column  class="w100p titlepr38"
                             :datas="trading_dynamic" :size="'small'" :isbanner="true"
                             :pb="'pb22'"
                             :bannerUrl="trading_dynamic_url"
                             @changerouter="changerouter"
                             :infotext="''"
                    ></Column>
                </div>
                <Idea class="w32_9 media_w100p"></Idea>
            </div>
            &lt;!&ndash;第四栏&ndash;&gt;
            <div class="w100p mt16 disflex jusbet index_main">
                <div class="w66_25p bgfff box_shadow_04 media_w100p media_mb20">
                    <Column  class="w100p titlepr38 timer36 tablelh50"
                             :datas="chamber_of_commerce" :size="'small'"
                             :pb="'pb30'"
                             @changerouter="changerouter"
                             :infotext="' -&#45;&#45; 营商会友，一切尽在商友会！'"
                    ></Column>
                </div>
                <Login class="w32_9 media_w100p " @tologin="tologin"></Login>
            </div>
            <div class="w100p bgfff box_shadow_04 pl31 pr32 mt16 pb30">
                <p class="fs20 c333 pt25 pb23">合作伙伴</p>
                <div class="clearfix pb23">
                    <a :href="v.link_url"
                       :title="v.link_name"
                       class="disblock h82 fl mr1p mb10 media_w50p media_mr0"
                       v-for="(v,k) in partner"
                       target="_blank">
                        <img :src="v.link_image || '' " alt=" " class="h100p disblock mauto" >
                    </a>
                </div>
            </div>
        </div>
        &lt;!&ndash;right&ndash;&gt;
        <div class="right_fix scale_ercode">
            <div class="wx curpointer postionre pt10 hoverbgdeepred" v-for="(v,k) in zhaoshang" :key="k" :title="'招商咨询：' +v">
                <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+v+'&site=qq&menu=yes'" class="postionab w100p h100p left0 top0 "  target="_blank"></a>
                <span class="iconfont icon-qq fs30 cfff disblock"></span>
                招商咨询{{k+1}}
                &lt;!&ndash;<img :src="v" alt="" class="w128 h128 postionab ercode">&ndash;&gt;
            </div>
            <div class="wb pt10 curpointer postionre hoverbgdeepred" v-for="(v,k) in jishu" :key="k" :title="'技术咨询：' +v">
                <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+v+'&site=qq&menu=yes'" class="postionab w100p h100p left0 top0 "  target="_blank"></a>
                <span class="iconfont icon-qq fs30 cfff disblock"></span>
                技术咨询{{k+1}}
                &lt;!&ndash;<img :src="v" alt="" class="w128 h128 postionab ercode">&ndash;&gt;
            </div>
        </div>

    </div>-->
</template>

<script>
    import News from './../components/Index/News'
    import Column from './../components/Index/Column'
    import Idea from './../components/Index/Idea'
    import Login from './../components/Index/Login'

    export default {
        name: "Index",
        components:{News,Column,Idea,Login},
        data(){
            return{
                banners:'',
                tips:'',//最新
                news: {
                    banners: '',
                    datas:'',
                    term_id:0,
                    parent:0
                },//新闻
                exchange_notice:{
                    title:'交易所公告',
                    tips:'',
                    term_id:0,
                    lists:'',
                    parent:0
                },//交易所公告
                trade_type:{
                    title:'交易品种',
                    tips:'goos',
                    type:'',
                    banners:[1,2],
                    term_id:0,
                    lists:'',
                    parent:0
                },//交易品种
                active_trade_type:0,//当前选择的交易品种
                trading_dynamic:{//交易动态
                    title:'交易所动态',
                    tips:'hot',
                    banners:[1,2],
                    term_id:0,
                    lists:'',
                    parent:0
                },
                analyst:{//分析师专栏
                    title:'分析师专栏',
                    tips:'hot',
                    term_id:0,
                    lists:'',
                    parent:0
                },
                chamber_of_commerce:{//商友会
                    title:'商友会',
                    term_id:0,
                    lists:'',
                    parent:0
                },
                partner:'',//合作伙伴
                setting:'',
                mainshow:0,
                weixin:'',
                weibo:'',
                trade_type_url:'',
                trading_dynamic_url:'',
                zhaoshang:[],
                jishu:[]
            }
        },
        created(){
            this.getInfo();
        },
        methods:{
            qqCon(qq){
                window.location = 'http://wpa.qq.com/msgrd?v=3&uin='+qq+'&site=qq&menu=yes'
            },
            refresh(){
                this.getInfo('refresh');
            },
            tradeTypeChange(index){
                //切换交易品种
                this.active_trade_type = index;
                if(this.trade_type.type[index].image){
                    this.trade_type_url = this.trade_type.type[index].image
                }else{
                    this.trade_type_url = this.trade_type.image;
                }
                this.$set(this.trade_type,'datas',this.trade_type.type[index].datas);
            },
            changerouter(oneid,partid,singleid,action,status){//一级id，板块id，内容id
                this.$router.push({path:'/details/'+oneid,query:{index:0,two:partid,three:singleid,taps:action,status:status}});
            },
            tologin(){
                this.$emit('tologin')
            },
            getInfo(action){
                var v = this;
                v.$axios.post('/index.php?g=portal&m=index&a=get_data')
                    .then((res) => {
                        res = res.data;
                        if (res.result == 1) {
                            var _news = res.new;
                            if(_news[0].datas.length>4){
                                _news[0].datas = _news[0].datas.slice(0,4);
                            }
                            v.news = _news[0];

                            v.news.banners = res.or_ad;
                            if(action == 'refresh'){
                                return
                            }
                            v.banners = res.index_ad;
                            v.tips = res.new_title;
                            v.partner = res.partner;
                            v.exchange_notice = _news[1];
                            v.trade_type = _news[2];
                            if(_news[2].type){
                                v.trade_type.datas = _news[2].type[0].datas;
                                if(v.trade_type.type[0].image){
                                    v.trade_type_url = v.trade_type.type[0].image
                                }else{
                                    v.trade_type_url = v.trade_type.image;
                                }
                            }else {
                                v.trade_type.datas = _news[2].datas || [];
                                v.trade_type_url = v.trade_type.image;
                            }
                            v.trade_type.tips = 'goos';
                            v.trading_dynamic = _news[3];
                            v.trading_dynamic_url = v.trading_dynamic.image;
                            v.trading_dynamic.tips = 'hot';
                            v.analyst = _news[4];
                            v.analyst.tips = 'hot';
                            v.chamber_of_commerce = _news[5];
                            v.jishu = res.setting.j_qq;
                            v.zhaoshang = res.setting.z_qq;
                        } else {
                            v.$message.error('获取失败！');
                        }
                        v.mainshow = 1;
                    }).catch((err) => {
                        console.log(err);
                        v.mainshow = 1;
                        v.$message.error('获取失败！');
                });
            }
        }
    }
</script>

<style>
    .index_banner .el-carousel__arrow{
        width: .5rem;
        height: .5rem;
        font-size: .35rem;
    }
    .index_banner .el-carousel__container{
        height: 100%;
    }
    .index_main .now,.index_main .goos,.index_main .write,.index_main .hot{
        position: absolute;
        width: .49rem;
        height: .18rem;
        right: -.6rem;
        top: .07rem;
    }
    .index_main .now{
        background: url("./../assets/img/now.png") no-repeat;
        background-size: 100% 100%;
        width: .53rem;
    }
    .index_main .goos{
        background: url("./../assets/img/goos.png") no-repeat;
        background-size: 100% 100%;
    }
    .index_main .write{
        background: url("./../assets/img/write.png") no-repeat;
        background-size: 100% 100%;
    }
    .index_main .hot{
        background: url("./../assets/img/hot.png") no-repeat;
        background-size: 100% 100%;
    }
    .right_fix{
        position: fixed;
        right: 0;
        top: 26%;
        background: #bf000e;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        font-size: 12px;
        color: #fff;
        z-index: 3;
        text-align: center;
        line-height: .3rem;
        padding: 0 .05rem;
    }
    .titlepr33 .title{
        padding-right: .33rem;
    }
    .titlepr38 .title{
        padding-right: .38rem;
    }
    .timer36 .time{
        right: .36rem;
    }
    .tablelh50 li{
        line-height: .5rem;
    }
</style>







































